import { ColumnProps, SearchProps, SearchRenderScope, SearchType } from "@/components/ProTable/interface";
import { Ref, VNode } from "vue/dist/vue";
import { TxsSearchBetweenInput } from "@/tsx/searchRender";
import { GetNowDate } from "@/utils/date";

//搜索项目的可选值
export type SearchRenterType = "inputBetween" | "dateBetween"; //日期范围

//编辑页的字段表单配置
export class ListColumns extends Array<ColumnProps> {
  constructor(...args: any[]) {
    super(...args);
  }

  //设置字段是否隐藏
  setIsShow(fieldName: string, isShow: boolean) {
    this.setItemRule(fieldName, {
      isShow: isShow
    });
  }

  //是否以标签形式展示
  setShowTag(fieldName: string, isShowTag: boolean) {
    this.setItemRule(fieldName, {
      tag: isShowTag
    });
  }

  //设置标签宽度
  setWidth(fieldName: string, w: number) {
    this.setItemRule(fieldName, {
      width: w
    });
  }

  //标签居中显示
  setAlignCenter(fieldName: string) {
    this.setItemRule(fieldName, {
      align: "center"
    });
  }

  //设置搜索项配置,如果该字段为搜索项必须调用该方法，props可传入{}空对象
  setSearchProps(fieldName: string, props: SearchProps) {
    props.label = props.label ?? this.getLabel(fieldName); //取label
    props.key = props.key ?? fieldName; //设置默认字段名
    props.el = props.el ?? "input"; //设置默认值
    props.optWhere = props.optWhere ?? "="; //设置默认的where条件

    this.setItemRule(fieldName, {
      search: props
    });
  }

  renderImage(fieldName: string) {
    this.setItemRuleOverite(fieldName, {
      render: {}
    });
  }

  //设置搜索项的渲染
  setSearchTemplateRender(
    fieldName: string,
    renderType: SearchRenterType,
    placeholderMin = "输入最小值",
    placeholderMax = "输入最大值"
  ) {
    if (renderType == "dateBetween") {
      //日期范围
      this.setItemRule(fieldName, {
        search: {
          key: fieldName,
          label: this.getLabel(fieldName),
          el: "date-picker",
          span: 1,
          optWhere: "BETWEEN",
          props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" }
          // defaultValue: [GetNowDate(), GetNowDate()]
        } as SearchProps
      });
    } else {
      this.setItemRule(fieldName, {
        search: {
          key: fieldName,
          label: this.getLabel(fieldName),
          optWhere: "BETWEEN",
          render: (params: SearchRenderScope) => {
            if (renderType == "inputBetween") {
              //input 范围输入
              return TxsSearchBetweenInput(params, fieldName, placeholderMin, placeholderMax);
            }
          }
        } as SearchProps
      });
    }
  }

  getLabel(fieldName: string): string {
    let fieldInfos = this.filter((s: ColumnProps) => s.prop == fieldName);
    if (fieldInfos.length > 0) {
      return fieldInfos[0].label ?? fieldName;
    }
    return fieldName;
  }

  //根据field查找一个字段的rule
  findItemRule(fieldName: string): ColumnProps {
    for (let i = 0; i < this.length; i++) {
      let column = this[i];
      if (column.prop == fieldName) {
        return column;
      }
    }
    return {} as ColumnProps;
  }

  //根据field设置一个字段的rule，不会覆盖原有的
  setItemRule(fieldName: string, overWriteRule: any) {
    let column = this.findItemRule(fieldName);
    Object.assign(column, overWriteRule);
  }

  //根据field设置一个字段的rule，会覆盖原有的
  setItemRuleOverite(fieldName: string, item: ColumnProps): boolean {
    for (let i = 0; i < this.length; i++) {
      let column = this[i];
      if (column.prop == fieldName) {
        this[i] = item;
        return true;
      }
    }
    return false;
  }
}
